const colors = {
  BRAND: '#546de5',
  TEXT: 'rgb(52, 52, 52)',
  TEXT_LINK: '#1663bb',
  BACKGROUND: '#fff',
  WHITE: '#fff',
  BLACK: '#000',
  GRAY_1: '#f8f8f8',
  GRAY_2: '#eaeaea',
  GRAY_3: '#e5e5e5',
  GRAY_4: '#cbcbcb',

  CODEMIRROR_TOKENS: {
    DEFINITION: '#566f4e', // Deep moss
    PROPERTY: '#4b7bbb', // Muted azure
    STRING: '#a06e3b', // Warm bronze
    NUMBER: '#3d8b7c', // Muted jade
    ATOM: '#8169ad', // Soft plum
    VARIABLE: '#3f7b6f', // Deep teal
    KEYWORD: '#b95d6a', // Muted ruby
    COMMENT: '#8997aa', // Cool gray
    OPERATOR: '#6b7a8f' // Slate blue
  }
};

const lightTheme = {
  brand: colors.BRAND,
  text: colors.TEXT,
  textLink: colors.TEXT_LINK,
  bg: colors.BACKGROUND,

  font: {
    size: {
      xs: '0.6875rem', // 11px
      sm: '0.75rem', // 12px
      base: '0.8125rem', // 13px
      md: '0.875rem', // 14px
      lg: '1rem', // 16px
      xl: '1.125rem' // 18px
    }
  },

  shadow: {
    sm: '0 1px 3px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.05)',
    md: '0 2px 8px rgba(0, 0, 0, 0.14), 0 0 0 1px rgba(0, 0, 0, 0.06)',
    lg: '0 2px 12px rgba(0, 0, 0, 0.15), 0 0 0 1px rgba(0, 0, 0, 0.05)'
  },

  border: {
    radius: {
      sm: '4px',
      base: '6px',
      md: '8px',
      lg: '10px',
      xl: '12px'
    }
  },

  colors: {
    text: {
      green: '#047857',
      danger: '#B91C1C',
      warning: '#f57c00',
      muted: '#838383',
      purple: '#8e44ad',
      yellow: '#cf8730'
    },
    bg: {
      danger: '#dc3545'
    }
  },

  input: {
    bg: 'white',
    border: '#ccc',
    focusBorder: '#8b8b8b',
    placeholder: {
      color: '#a2a2a2',
      opacity: 0.8
    }
  },

  menubar: {
    bg: 'rgb(44, 44, 44)'
  },

  variables: {
    bg: '#fff',

    name: {
      color: '#546de5'
    },

    runtime: {
      color: 'rgb(0, 0, 0)'
    }
  },

  sidebar: {
    color: 'rgb(52, 52, 52)',
    muted: '#4b5563',
    bg: colors.GRAY_1,
    dragbar: {
      border: colors.GRAY_3,
      activeBorder: colors.GRAY_4
    },

    badge: {
      bg: '#eaeaea'
    },

    search: {
      border: '1px solid rgb(211 211 211)',
      bg: '#fff'
    },

    collection: {
      item: {
        bg: colors.GRAY_2,
        hoverBg: colors.GRAY_2,
        focusBorder: colors.GRAY_4,
        indentBorder: `solid 1px ${colors.GRAY_3}`,
        active: {
          indentBorder: `solid 1px ${colors.GRAY_3}`
        }
      }
    },

    dropdownIcon: {
      color: 'rgb(110 110 110)'
    }
  },

  welcome: {
    heading: '#737373',
    muted: '#4b5563'
  },

  dropdown: {
    color: 'rgb(48 48 48)',
    iconColor: 'rgb(75, 85, 99)',
    bg: '#fff',
    hoverBg: '#e9ecef',
    shadow: 'rgb(50 50 93 / 25%) 0px 6px 12px -2px, rgb(0 0 0 / 30%) 0px 3px 7px -3px',
    separator: '#e7e7e7',
    labelBg: '#f3f3f3',
    selectedBg: '#D977060F',
    selectedColor: '#D97706',
    mutedText: '#9B9B9B',
    primaryText: '#343434',
    secondaryText: '#6B7280',
    headingText: '#343434'
  },

  listItem: {
    hoverBg: '#e7e7e7',
    activeBg: '#dcdcdc'
  },

  workspace: {
    accent: '#D97706',
    border: '#e7e7e7',
    borderMuted: '#f3f3f3',
    card: {
      bg: '#fff'
    },
    button: {
      bg: '#f3f3f3'
    },
    collection: {
      header: {
        indentBorder: 'solid 1px #efefef'
      },
      item: {
        indentBorder: 'solid 1px #f9f9f9'
      }
    },
    environments: {
      bg: '#fbfbfb',
      indentBorder: 'solid 1px #efefef',
      activeBg: '#eeeeee',
      search: {
        bg: '#fff'
      }
    }
  },

  request: {
    methods: {
      get: 'rgb(5, 150, 105)',
      post: '#8e44ad',
      put: '#ca7811',
      delete: 'rgb(185, 28, 28)',
      // customize these colors if needed
      patch: '#ca7811',
      options: '#ca7811',
      head: '#ca7811'
    },
    grpc: '#6366f1',
    ws: '#f59e0b',
    gql: '#e535ab'
  },

  requestTabPanel: {
    url: {
      bg: colors.WHITE,
      icon: '#515151',
      iconDanger: '#d91f11',
      errorHoverBg: '#fef2f2',
      border: `solid 1px ${colors.GRAY_3}`
    },
    dragbar: {
      border: '#efefef',
      activeBorder: 'rgb(200, 200, 200)'
    },
    bodyModeSelect: {
      color: '#efefef'
    },
    responseSendIcon: 'rgb(209, 213, 219)',
    responseStatus: 'rgb(117 117 117)',
    responseOk: '#047857',
    responseError: 'rgb(185, 28, 28)',
    responsePending: '#1663bb',
    responseOverlayBg: 'rgba(255, 255, 255, 0.6)',
    card: {
      bg: '#fff',
      border: '#f4f4f4',
      hr: '#f4f4f4'
    },
    cardTable: {
      border: '#efefef',
      bg: '#fff',
      table: {
        thead: {
          bg: 'rgb(249, 250, 251)',
          color: 'rgb(75 85 99)'
        }
      }
    },
    graphqlDocsExplorer: {
      bg: '#fff',
      color: 'rgb(52, 52, 52)'
    }
  },

  collection: {
    environment: {
      bg: '#efefef',

      settings: {
        bg: 'white',
        sidebar: {
          bg: '#eaeaea',
          borderRight: 'transparent'
        },
        item: {
          border: '#546de5',
          hoverBg: '#e4e4e4',
          active: {
            bg: '#dcdcdc',
            hoverBg: '#dcdcdc'
          }
        },
        gridBorder: '#f4f4f4'
      }
    },

    sidebar: {
      bg: '#eaeaea'
    }
  },

  notifications: {
    bg: 'white',
    list: {
      bg: '#eaeaea',
      borderRight: 'transparent',
      borderBottom: '#d3d3d3',
      hoverBg: '#e4e4e4',
      active: {
        border: '#546de5',
        bg: '#dcdcdc',
        hoverBg: '#dcdcdc'
      }
    }
  },

  modal: {
    title: {
      color: 'rgb(86 86 86)',
      bg: '#f1f1f1',
      iconColor: 'black'
    },
    body: {
      color: 'rgb(52, 52, 52)',
      bg: 'white'
    },
    input: {
      bg: 'white',
      border: '#ccc',
      focusBorder: '#8b8b8b'
    },
    backdrop: {
      opacity: 0.4
    }
  },

  button: {
    secondary: {
      color: '#212529',
      bg: '#e2e6ea',
      border: '#dae0e5',
      hoverBorder: '#696969'
    },
    close: {
      color: '212529',
      bg: 'white',
      border: 'white',
      hoverBorder: ''
    },
    disabled: {
      color: '#9f9f9f',
      bg: '#efefef',
      border: 'rgb(234, 234, 234)'
    },
    danger: {
      color: '#fff',
      bg: '#dc3545',
      border: '#dc3545'
    }
  },

  tabs: {
    marginRight: '1.2rem',
    active: {
      color: '#343434',
      border: '#cf8730'
    },
    secondary: {
      active: {
        bg: '#FFFFFF',
        color: '#343434'
      },
      inactive: {
        bg: '#ECECEE',
        color: '#989898'
      }
    }
  },

  requestTabs: {
    color: 'rgb(52, 52, 52)',
    bg: '#f6f6f6',
    bottomBorder: '#efefef',
    icon: {
      color: '#9f9f9f',
      hoverColor: 'rgb(76 76 76)',
      hoverBg: 'rgb(234, 234, 234)'
    },
    active: {
      bg: '#e7e7e7'
    },
    shortTab: {
      color: 'rgb(117 117 117)',
      bg: 'white',
      hoverColor: 'rgb(76 76 76)',
      hoverBg: '#eaeaea'
    }
  },

  codemirror: {
    bg: colors.WHITE,
    border: colors.WHITE,
    placeholder: {
      color: '#a2a2a2',
      opacity: 0.75
    },
    gutter: {
      bg: colors.WHITE
    },
    variable: {
      valid: '#047857',
      invalid: 'rgb(185, 28, 28)',
      prompt: '#186ADE',
      info: {
        color: '#343434',
        bg: '#FFFFFF',
        boxShadow: '0 1px 3px rgba(0, 0, 0, 0.45)',
        editorBg: '#F7F7F7',
        iconColor: '#989898',
        editorBorder: '#EFEFEF',
        editorFocusBorder: '#989898',
        editableDisplayHoverBg: 'rgba(0,0,0,0.02)',
        border: '#EFEFEF',
        editorBorder: '#EFEFEF'
      }
    },
    tokens: {
      definition: colors.CODEMIRROR_TOKENS.DEFINITION,
      property: colors.CODEMIRROR_TOKENS.PROPERTY,
      string: colors.CODEMIRROR_TOKENS.STRING,
      number: colors.CODEMIRROR_TOKENS.NUMBER,
      atom: colors.CODEMIRROR_TOKENS.ATOM,
      variable: colors.CODEMIRROR_TOKENS.VARIABLE,
      keyword: colors.CODEMIRROR_TOKENS.KEYWORD,
      comment: colors.CODEMIRROR_TOKENS.COMMENT,
      operator: colors.CODEMIRROR_TOKENS.OPERATOR
    },
    searchLineHighlightCurrent: 'rgba(120,120,120,0.10)',
    searchMatch: '#B8860B',
    searchMatchActive: '#DAA520'
  },

  table: {
    border: '#efefef',
    thead: {
      color: '#616161'
    },
    striped: '#f3f3f3',
    input: {
      color: '#000000'
    }
  },

  plainGrid: {
    hoverBg: '#f4f4f4'
  },

  scrollbar: {
    color: 'rgb(152 151 149)'
  },

  dragAndDrop: {
    border: '#8b8b8b', // Using the same gray as focusBorder from input
    borderStyle: '2px solid',
    hoverBg: 'rgba(139, 139, 139, 0.05)', // Matching the border color with reduced opacity
    transition: 'all 0.1s ease'
  },

  tooltip: {
    bg: '#374151',
    color: '#ffffff',
    shortcutColor: '#f59e0b'
  },

  infoTip: {
    bg: 'white',
    border: '#e0e0e0',
    boxShadow: '0 4px 12px rgba(0, 0, 0, 0.15)'
  },

  statusBar: {
    border: '#E9E9E9',
    color: 'rgb(100, 100, 100)'
  },
  console: {
    bg: '#f8f9fa',
    headerBg: '#f8f9fa',
    contentBg: '#ffffff',
    border: '#dee2e6',
    titleColor: '#212529',
    countColor: '#6c757d',
    buttonColor: '#495057',
    buttonHoverBg: '#e9ecef',
    buttonHoverColor: '#212529',
    messageColor: '#212529',
    timestampColor: '#6c757d',
    emptyColor: '#6c757d',
    logHoverBg: 'rgba(0, 0, 0, 0.03)',
    resizeHandleHover: '#0d6efd',
    resizeHandleActive: '#0d6efd',
    dropdownBg: '#ffffff',
    dropdownHeaderBg: '#f8f9fa',
    optionHoverBg: '#f8f9fa',
    optionLabelColor: '#212529',
    optionCountColor: '#6c757d',
    checkboxColor: '#0d6efd',
    scrollbarTrack: '#f8f9fa',
    scrollbarThumb: '#ced4da',
    scrollbarThumbHover: '#adb5bd'
  },

  grpc: {
    tabNav: {
      container: {
        bg: '#f5f5f5'
      },
      button: {
        active: {
          bg: '#ffffff',
          color: '#000000'
        },
        inactive: {
          bg: 'transparent',
          color: '#525252'
        }
      }
    },
    importPaths: {
      container: {
        bg: '#ffffff'
      },
      header: {
        text: '#838383',
        button: {
          color: '#838383',
          hoverColor: '#343434'
        }
      },
      error: {
        bg: 'transparent',
        text: '#B91C1C',
        link: {
          color: '#B91C1C',
          hoverColor: '#dc2626'
        }
      },
      item: {
        bg: 'transparent',
        hoverBg: 'rgba(0, 0, 0, 0.05)',
        text: '#343434',
        icon: '#838383',
        checkbox: {
          color: '#343434'
        },
        invalid: {
          opacity: 0.6,
          text: '#B91C1C'
        }
      },
      empty: {
        text: '#838383'
      },
      button: {
        bg: '#e2e6ea',
        color: '#212529',
        border: '#dae0e5',
        hoverBorder: '#696969'
      }
    },
    protoFiles: {
      container: {
        bg: '#ffffff'
      },
      header: {
        text: '#838383',
        button: {
          color: '#838383',
          hoverColor: '#343434'
        }
      },
      error: {
        bg: 'transparent',
        text: '#B91C1C',
        link: {
          color: '#B91C1C',
          hoverColor: '#dc2626'
        }
      },
      item: {
        bg: 'transparent',
        hoverBg: 'rgba(0, 0, 0, 0.05)',
        selected: {
          bg: 'rgba(217, 119, 6, 0.2)',
          border: '#d97706'
        },
        text: '#343434',
        secondaryText: '#838383',
        icon: '#838383',
        invalid: {
          opacity: 0.6,
          text: '#B91C1C'
        }
      },
      empty: {
        text: '#838383'
      },
      button: {
        bg: '#e2e6ea',
        color: '#212529',
        border: '#dae0e5',
        hoverBorder: '#696969'
      }
    }
  },
  deprecationWarning: {
    bg: 'rgba(217, 31, 17, 0.1)',
    border: 'rgba(217, 31, 17, 0.1)',
    icon: '#D91F11',
    text: '#343434'
  },

  preferences: {
    sidebar: {
      border: '#EFEFEF'
    }
  },

  examples: {
    buttonBg: '#D977061A',
    buttonColor: '#D97706',
    buttonText: '#fff',
    buttonIconColor: '#000',
    border: '#efefef',
    urlBar: {
      border: '#efefef',
      bg: '#F5F5F5'
    },
    table: {
      thead: {
        bg: '#f8f9fa',
        color: '#212529'
      }
    },
    checkbox: {
      color: '#fff'
    }
  }
};

export default lightTheme;
